<template>
  <div class="main">
    <div class="title">全物资全生命周期信息</div>
    <div class="content ub">
      <grid :cols="2" class="uf-1">
        <grid-item v-for="(x,i) in gridData" :key="i" class="my-grid" @on-item-click="onGridClick(x)">
          <i slot="icon" class="fa fa-2x" :class="x.icon" :style="{color:'#fbf9fc'}"></i>
          <span slot="label" :style="{color:'#ffffff'}">{{x.text}}</span>
        </grid-item>
      </grid>
      <div class="side ub-v uc ufe">
        <i class="vux-close" style="color:white;" @click="handleClose"></i>
        <i class="fa fa-gear" @click="handleGear"></i>
        <i class="fa fa-info-circle" @click="handleInfo"></i>
      </div>
    </div>

    
    <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
      <p style="color:#fff;text-align:center;" @click="showDialogStyle = false">
        <span style="font-size:30px;">制作单位</span>
        <br>
        <span style="font-size:30px;">联通系统集成 软研部</span>
        <br>
        <br>
        <x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
      </p>
    </x-dialog>
    
  </div>
</template>

<script>
import { Grid, GridItem,XDialog } from 'vux'
export default {
  data() {
    return {
      gridData: [
        {
          text: '二维码库存',
          icon: 'fa-tags',
          color: 'orange',
          link: '/store-index',
        },
        // {
        //   text: '商城数据',
        //   icon: 'fa-newspaper-o',
        //   color: '#ff5555',
        //   link: '/shop-index'
        // },
        {
          text: '工程项目',
          icon: 'fa-edit',
          color: '#99cc99',
          link: '/project-index'
        },
        // {
        //   text: '营销物资',
        //   icon: 'fa-paper-plane-o',
        //   color: '#9999ff',
        //   link: '/market-index'
        // },
        {
          text: '固网终端',
          icon: 'fa-magic',
          color: '#66C0FF',
          link: '/terminal-index'
        },
        {
          text: '运维物资',
          icon: 'fa-list',
          color: '#ff5555',
          link: '/operation-index'
        },
        {
          text: '网络资源',
          icon: 'fa-list-alt',
          color: '#99cc99',
          link: '/resource-index'
        },
        // {
        //   text: '通知管理',
        //   icon: 'fa-outdent',
        //   color: '#9999ff',
        //   link: '/article-mgr'
        // },
        
      ],
      showDialogStyle:false
    }
  },
  methods: {
    onGridClick(item) {
      if (item.func) {
        console.log(item.func)
        this[item.func]()
      } else {
        this.$router.push(item.link)
      }

    },
    handleGear(){
      this.$vux.toast.text("待定中","middle")
    },
    handleInfo(){
      this.showDialogStyle=true
    },
    handleClose(){
      window.location.href="about:blank";
      window.close();
    }
  },
  components: {
    Grid, GridItem,XDialog
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '~vux/src/styles/close';
.main {
  height: 100%;
  background-image: linear-gradient(to top, #5f72bd 0%, #9b23ea 100%);
  .title{
    padding:20px 20px;
    padding-bottom: 0;
    color:#fbf9fc;
    font-size: 22px;
  }
  
  .content{
    padding-top: 20px;
    padding-left: 20px;
    color:#fbf9fc;
  }
  .side{
    width:80px;
    margin-bottom:-80px;
    i{
      height:55px;
      font-size:22px;
    }
  }

  .my-grid{
    height:110px;
    background-color: rgba(255,255,255,0.1);
  }
}
</style>
<<style lang="less" scoped>
// .weui-grids:before{
//   border-top:none !important;
// }
// .weui-grid:before{
//   border-right:none !important;
// }
// .weui-grid:after{
//   border-bottom:none !important;
// }
</style>
